
import React, { Component } from 'react'
import '../assets/style/bottomNav.less'
export default class BottomNav extends Component {
    // 确定组件的内容和选择样式
    componentDidMount() {
        let span = document.querySelectorAll('.bottomnavbar>span')
        span.forEach(item => {
            // 路由路径
            let path = this.props.history.location.pathname
            let itemobj = JSON.parse(item.getAttribute('data-data'))
            // 路径和被选中样式相结合
            if (itemobj.path === path) {
                item.setAttribute('class', 'fontstyle')
                let datas = {
                    pathname: itemobj.path ? itemobj.path : "",
                    query: itemobj.query
                }
                this.props.history.push(datas)
            } else {
                item.removeAttribute('class')
            }
            // 点击切换样式，并进行路由跳转
            item.addEventListener('click', (event) => {
                span.forEach(item => {
                    item.removeAttribute('class')
                })
                event.target.setAttribute('class', 'fontstyle')
                let obj = JSON.parse(event.target.getAttribute('data-data'))
                let data = {
                    pathname: obj.path ? obj.path : "",
                    query: obj.query
                }
                this.props.history.push(data)
            })
        })

    }

    render() {
        return (
            <div className={"bottomnavbar " + this.props.className}>
                {
                    this.props.value ? this.props.value.map((item, index) => {
                        return <span key={index} data-data={JSON.stringify(item)} >{item.name}</span>
                    }) : ''
                }
            </div>
        )
    }
}
